<template>
  <el-container class="dcs-main-container" >
    <transition name="el-fade-in-linear">
      <el-aside class="real-aside" width="300px"  v-if="device!=='mobile'" v-show="showAside">
        <div style="margin-bottom: 10px"></div>
        <el-row style="height: 40px">
          <el-input
            prefix-icon="el-icon-search"
            style="width:100%"
            v-model="orgQuery.name"
            placeholder="关键字"></el-input>
        </el-row>
        <div style="margin-bottom: 20px"></div>
        <el-row>
          <el-tree v-loading="treeLoading" class="dcs-left-tree"  ref="OrganizeTreeRef" :check-strictly="true" :filter-node-method="filterNode" :data="OrganizeTree"
                       :props="treeProps" node-key="id" default-expand-all  show-checkbox :close-on-click-modal="false"  @check="treeCheck" @node-click="nodeCheck">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>
                <span v-if="data.type==OrgnizeType.ANCESTOR" class="mgl-10"><span class="tenant-title">{{ data.name }}</span></span>
                <span v-else-if="data.type==OrgnizeType.FACTORY" class="mgl-10"><span class="company-title">{{ data.name }}</span><el-tag v-if="data.sub_title" type="info" size="mini">({{ data.sub_title }})</el-tag></span>
                <span v-else-if="data.type==OrgnizeType.DEPARTENT" class="mgl-10"><span class="department-title">{{ data.name }}</span></span>
              </span>
            </span>
          </el-tree>
        </el-row>
      </el-aside>
    </transition>
    <el-container style="position: relative" :style="{'paddingLeft':device==='mobile'?'0px':'20px'}">
      <el-tooltip content="显示/隐藏侧边栏" placement="right">
        <el-button :icon="toggleIcon" class="aside-toggle-btn" @click.native="toggleAsideBtn" v-if="device!=='mobile'" />
      </el-tooltip>
      <el-header class="date-search-header" :height="device==='mobile'?'120px':'60px'">
        <el-select v-model="orgQuery.orgnization_id" placeholder="请选择组织" @change="orgnizeChange" v-if="device==='mobile'">
          <el-option v-for="(item,index) in OrganizeTree[0].children" :key="index" :label="item.name" :value="item.id"  />
        </el-select>
        <div class="header-option">
          <el-button-group v-show="device!=='mobile'">
            <el-button  icon="el-icon-edit" @click="changeView(false)" style="color: white" :style="{'background-color':reportView?'#409EFF':'rgba(64,158,255,0.7)'}" :disabled="!canInputData">录入</el-button>
            <el-button  :style="{'background-color':reportView?'rgba(64,158,255,0.7)':'#409EFF'}" style="color: white" @click="changeView(true)" :disabled="!canInputData">报表<i class="el-icon-document"></i></el-button>
          </el-button-group>
          <div class="date-picker" v-if="!reportView&&dateViewVisiable">
            <el-date-picker
            v-model="orgQuery.date"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"></el-date-picker>
            <el-button style="margin-left: 10px" type="primary" v-perm="['inputs-search']" :disabled="!canInputData" @click="dateChoice">筛选</el-button>
          </div>
        </div>
        <el-button-group v-show="device==='mobile'">
          <el-button  icon="el-icon-edit" @click="changeView(false)" style="color: white" :style="{'background-color':reportView?'#409EFF':'rgba(64,158,255,0.7)'}">录入</el-button>
          <el-button  :style="{'background-color':reportView?'rgba(64,158,255,0.7)':'#409EFF'}" style="color: white" @click="changeView(true)">报表<i class="el-icon-document"></i></el-button>
        </el-button-group>
      </el-header>
      <el-main style="padding: 10px">
        <transition name="fade" mode="out-in">
          <keep-alive :include='cachedViews'>
            <router-view ref="base_child" :key="key"></router-view>
          </keep-alive>
        </transition>
      </el-main>

    </el-container>

  </el-container>
</template>

<script>
  import {mapGetters} from 'vuex'
  import debounce from 'lodash/debounce'
  import {confirm,OrgnizeType } from '@/utils/constants'

  export default {
    name: 'base-fill',
    data(){
      return {
        reportView:false,
        orgQuery:{
          name:'',
          date:'',
          orgnization_id:null
        },
        treeLoading:false,
        OrgnizeType,
        OrganizeTree: [{children:[]}],
        treeProps: {
          label: 'name',
          children: 'children'
        },
        showAside:true,
        dateViewVisiable:true,
        toggleIcon:'el-icon-d-arrow-left',
        pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
        },
      }
    },
    watch: {
      'orgQuery.name': debounce(function(val) {
        this.$refs.OrganizeTreeRef.filter(val)
      }, 600)
    },
    computed:{
      ...mapGetters([
        'device'
      ]),
      cachedViews() {
        return this.$store.state.tagsView.cachedViews
      },
      key() {
        return this.$route.path
      },
      canInputData(){
        return Boolean(this.OrganizeTree[0].children.length)
      }
    },
    created() {
      this.fetchData(this.orgnizesNum(this.key))
    },
    methods:{
      controlAside(show){
        this.showAside = show
        this.toggleIcon = show?'el-icon-d-arrow-left':'el-icon-d-arrow-right'
      },
      toggleAsideBtn(){
        const show = !this.showAside
        this.controlAside(show)
      },
      hideDateView(){
        this.dateViewVisiable=false
      },
      changeView(is_report=false){
        if (this.reportView===is_report)
          return
        this.reportView=is_report
        this.controlAside(!is_report)
        this.$refs['base_child'].panelSwitch(is_report)
      },
      async fetchData(routeNumber=2) {
        this.treeLoading = true
        this.OrganizeTree = await this.$store.dispatch('user/ownedOrgnizes',routeNumber)
        this.treeDefaultCheck()
        this.treeLoading = false
      },
      treeDefaultCheck(){
        if (!this.OrganizeTree[0].children.length)
          return;
        const firstNode = this.OrganizeTree[0].children[0]
        if (this.device==='mobile'){
          this.orgQuery.orgnization_id = firstNode.id
          this.$refs['base_child'].orgnizeCheck(this.orgQuery)
          return
        }
        this.$nextTick(()=>{
          this.$refs['OrganizeTreeRef'].setChecked(firstNode.id, true, false)
          this.treeCheck(firstNode)
        })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      dateChoice(val){
        this.$refs['base_child'].orgnizeCheck(this.orgQuery)
      },
      treeCheck(row,data){
        const needClosed = this.$refs.OrganizeTreeRef.getCheckedKeys().filter(ck=>ck!=row.id)
        needClosed.forEach(ck=> {
          this.$refs.OrganizeTreeRef.setChecked(ck, false, false)
        })
        const currentOrgIds = this.$refs.OrganizeTreeRef.getCheckedKeys()
        this.orgQuery.orgnization_id = null
        if (currentOrgIds.length)
          this.orgQuery.orgnization_id = currentOrgIds[0]
        this.$refs['base_child'].orgnizeCheck(this.orgQuery)
      },
      nodeCheck(row, node, el){
        //如果点击集团名称则返回不执行
        if (row.id==1)
          return
        this.$refs['OrganizeTreeRef'].setChecked(row.id, true, false)
        this.treeCheck(row)
      },
      orgnizesNum(route_name){
        const foodList = ['ccsc']
        const transferList = ['sy']
        const routeComps = route_name.split('/')
        const cur_route = routeComps[routeComps.length-1]
        return foodList.indexOf(cur_route)>-1?1:transferList.indexOf(cur_route)>-1?3:2
      },
      orgnizeChange(){
        this.$refs['base_child'].orgnizeCheck(this.orgQuery)
      }

    }

  }
</script>
<style lang="scss">



</style>

<style lang="scss" scoped>
  @import 'src/styles/variables.scss';
  .tenant-title{
    font-weight: normal;
    font-size: small;
    color:$tenant-color;
  }
  .company-title{
    font-weight: lighter;
    color: $company-color;
    font-size: small;
    margin-right: 10px;
  }
  .department-title{
    font-weight: lighter;
    color: $department-color;
    font-size: small;
  }

  .dcs-main-container{
    width: 100%;
    min-height: calc(100vh - 84px);
  }
  .aside-toggle-btn{
    position: absolute;
    width: 25px;
    height: 80px;
    top: 100px;
    padding: 0;
    left: 0;
  }
  .real-aside{
    margin-bottom: 0;
    max-height:calc(100vh - 84px);
    overflow-y: auto;

    .el-tree{
      min-height: calc(100vh - 204px);
      padding-top: 10px;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
    }

    .el-tree>.el-tree-node{
      display: inline-block;
      min-width: 100%;
    }

  }
  .date-search-header{
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;

    .header-option{
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }

</style>
